<style lang="less" scoped>
    @import './second_layer.less';
</style>
    <template>
        <div>
            <div v-if="createdConfig.config.event_rule.rules.length > 0" ref="userattr" :class="sublen > 1? 'filter-area1' : 'filter-area'">
                <div class="condition" v-if="sublen > 1" >
                    <Button class="condition-button" v-on:click="switchConditon()">{{AndOr === 'and' ? '且' : '或'}}</Button>
                </div>
                <div v-for="(item,index) in createdConfig.config.event_rule.rules[subscript].rules"> 
                    <thirdLayer  :subscript ='index' :sublength = 'sublen-1'  :createdConfig = "createdConfig" :userAttribute = "userAttribute" class="mg"></thirdLayer>
                </div>
            </div>
        </div>
    </template>
<script>
import thirdLayer from './third_layer/third_layer';
export default {
    data() {
        return {
            Attribute:'',
            condition:'',
            AttributeValueList:[],
            AttributeValue:''
        }
    },
    watch:{
        sublen(newValue,oldValue){
            if(newValue == 1){
                this.$parent.chnageParent(this.subscript);
            }   
        }      
    },
    props:['createdConfig','userAttribute','subscript','sublength'],
    computed:{
        AndOr(){
            return this.createdConfig.config.event_rule.rules[this.subscript].condition;
        },
        sublen(){
            return this.createdConfig.config.event_rule.rules[this.subscript].rules.length;
        }
    },
    methods: {
        /**
         * 切换且与或
         */
        switchConditon(){
            console.log(this.subscript);
            this.AndOr === 'and' ? this.createdConfig.config.event_rule.rules[this.subscript].condition = 'or' : this.createdConfig.config.event_rule.rules[this.subscript].condition = 'and';
        },
        addSecond(){
            this.createdConfig.config.event_rule.rules[this.subscript].rules.push({
                "type": "event_rule",
                "time": {
                    "type": "absolute_time",
                    "values": [
                        "2019-07-10",
                        "2019-07-11"
                    ]
                },
                "event": "$pageview",
                "measure": {
                    "name": "user_count",
                    "value": "${events1#distinct_id.count(distinct(#cdt#)).NULL}"
                },
                "operator": "equal",
                "values": [
                    0
                ],
                "filter": {
                    "condition": "and",
                    "rules": [
                        {
                            "type": "0",
                            "property": "event.city",
                            "operator": "equal",
                            "values": [
                                "北京"
                            ]
                        }
                    ]
                }
            })
        },
        delSecond(subindex){
            if(this.createdConfig.config.event_rule.rules[this.subscript].rules.length > 1){
                this.createdConfig.config.event_rule.rules[this.subscript].rules.splice(subindex,1)
            }
        },
    },
    components: {
        thirdLayer
    }
}

</script>

